<template>
  <div class="login-container">
    <el-form :model="loginForm" ref="formRef" class="login-form" auto-complete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">欢迎来到中舞网</h3>
      </div>

      <el-form-item prop="username">
        <el-input
            v-model="loginForm.username"
            ref="username"
            placeholder="admin"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <el-input
            v-model="loginForm.password"
            ref="passwordRef"
            placeholder="111111"
            name="password"
            type="password"
            tabindex="2"
            auto-complete="on"
        />
      </el-form-item>
      <el-button @click="handleLogin" type="primary"
                 style="width:100%;margin-bottom:30px;height: 40px;">
        登  录
      </el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useUserInfoStore } from '@/stores/login';
import { useRoute, useRouter } from 'vue-router'
import {ElMessage} from 'element-plus'
const loginForm = ref({
  username: 'admin',
  password: '111111'
})
const loading = ref(false)
const userInfoStore = useUserInfoStore()
const route = useRoute()
const router = useRouter()
/*
点击登陆的回调
*/
const handleLogin =  () => {
  loading.value = true
  const {username, password} = loginForm.value
  try {
    userInfoStore.login(username, password)
    router.push({path: '/me'})
    ElMessage({
      type: 'success',
      message: '登录成功'
    })
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="less">
.login-container {
  width: 1200px;
  margin: 0 auto;
  //background-image: url("../../../public/bg.webp");
  //background-size: cover;
}
.title-container{
  position: relative;
}
.login-form {
  position: relative;
  width: 520px;
  max-width: 100%;
  padding: 160px 35px 0;
  margin: 0 auto;
  overflow: hidden;
}
.title-container .title {
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
</style>
